<template>
  <div class="lineChart">
    <div :id="chartId" class="line-charts"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, onUnmounted, watch } from 'vue';
import { appTheme } from '@/components/sciChartComponents/TypeScript/theme.ts';
// import {
//   SciChartSurface,
//   NumericAxis,
//   FastLineRenderableSeries,
//   SplineLineRenderableSeries,
//   EStrokePaletteMode,
//   TextAnnotation,
//   Thickness,
//   LineSeriesDataLabelProvider,
//   XyDataSeries,
//   EllipsePointMarker,
//   SweepAnimation,
//   SciChartJsNavyTheme,
//   NumberRange,
//   MouseWheelZoomModifier,
//   ZoomPanModifier,
//   ZoomExtentsModifier,
//   RubberBandXyZoomModifier,
//   AutoRange,
//   AxisAlignment,
//   AxisOrientation,
//   NumericLabelProvider,
//   CursorModifier,
//   YAxis,
//   AxisTitleStyle,
//   EAxisAlignment,
//   ELabelAlignment,
//   ENumericFormat,
//   RolloverModifier,
//   ECoordinateMode,
//   EHorizontalAnchorPoint,
//   EStrokePaletteMode,
//   parseColorToUIntArgb,
// } from 'scichart';

import {
  DataLabelState,
  ECoordinateMode,
  EHorizontalAnchorPoint,
  EVerticalAnchorPoint,
  EStrokePaletteMode,
  FastLineRenderableSeries,
  EAnimationType,
  EVerticalTextPosition,
  IPointMetadata,
  IPointMarkerPaletteProvider,
  IRenderableSeries,
  LineSeriesDataLabelProvider,
  NumericAxis,
  NumberRange,
  parseColorToUIntArgb,
  SciChartSurface,
  SplineLineRenderableSeries,
  TextAnnotation,
  TPointMarkerArgb,
  TWebAssemblyChart,
  Thickness,
  TSciChart,
  XyDataSeries,
  XySeriesInfo,
  EllipsePointMarker,
  RolloverModifier,
  SciChartJsNavyTheme,
  MouseWheelZoomModifier,
  ZoomPanModifier,
  ZoomExtentsModifier,
  EAxisAlignment,
  VerticalSliceModifier,
  SeriesSelectionModifier,
} from 'scichart';

interface SciChartProps {
  data?: { xValues: number[]; yValues: number[] };
  lineColor?: string;
  lineThickness?: number;
  pointMarkerColor?: string;
  xAxisTitle?: string;
  yAxisTitle?: string;
}

const props = withDefaults(defineProps<SciChartProps>(), {
  lineColor: 'steelblue',
  lineThickness: 3,
  pointMarkerColor: '#fff',
  xAxisTitle: 'X Axis',
  yAxisTitle: 'Y Axis',
});

const chartId = ref('line-chart-' + Math.random().toString(36).substring(2, 9));
const chartInitializationPromise = ref<Promise<any> | undefined>(undefined);

const initSciChart = async () => {
  // Create a chart surface
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(chartId.value, {
    theme: new SciChartJsNavyTheme(),
  });

  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) }));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1) }));

  const defaultStroke = 'SteelBlue';
  const defaultFill = 'LightSteelBlue';

  const applyStyle = (series, isSelected, isHovered) => {
    series.stroke =
      isSelected && isHovered
        ? '#FFBB99'
        : isSelected
        ? '#FFF'
        : isHovered
        ? '#FF7733'
        : defaultStroke;
    series.pointMarker.stroke = series.stroke;
    series.pointMarker.fill =
      isSelected && isHovered
        ? '#FFBB99'
        : isSelected
        ? '#FFF'
        : isHovered
        ? '#FF7733'
        : defaultFill;
  };

  // Create a chart with line series with a point-marker
  sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
      stroke: defaultStroke,
      strokeThickness: 3,
      pointMarker: new EllipsePointMarker(wasmContext, {
        width: 10,
        height: 10,
        strokeThickness: 2,
        stroke: defaultStroke,
        fill: defaultFill,
      }),
      dataSeries: new XyDataSeries(wasmContext, {
        xValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        yValues: [4.3, 5.3, 6, 6.3, 6, 5.2, 4.5, 4.6, 5, 6, 7, 8],
      }),

      // Apply a style to the series on selected and hovered
      onSelectedChanged: sourceSeries => {
        applyStyle(sourceSeries, sourceSeries.isSelected, sourceSeries.isHovered);
      },

      onHoveredChanged: sourceSeries => {
        applyStyle(sourceSeries, sourceSeries.isSelected, sourceSeries.isHovered);
      },
    })
  );

  // Add the DatapointSelectionModifier to the chart
  sciChartSurface.chartModifiers.add(
    new SeriesSelectionModifier({
      enableSelection: true,
      enableHover: true,
    })
  );

  // #endregion

  // Add some instructions to the user
  const options = {
    xCoordinateMode: ECoordinateMode.Relative,
    yCoordinateMode: ECoordinateMode.Relative,
    x1: 0.5,
    y1: 0.0,
    horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
    opacity: 0.33,
    textColor: 'White',
  };
  sciChartSurface.annotations.add(
    new TextAnnotation({
      text: 'SeriesSelectionModifier Example',
      fontSize: 36,
      yCoordShift: 25,
      horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
      verticalAnchorPoint: EVerticalAnchorPoint.Top,
      ...options,
    })
  );
  //   sciChartSurface.annotations.add(
  //     new TextAnnotation({
  //       text: 'Hover or click the series. Check the output in the console.',
  //       fontSize: 20,
  //       yCoordShift: 75,
  //       ...options,
  //     })
  //   );
  return sciChartSurface;
};

onMounted(() => {
  chartInitializationPromise.value = initSciChart();
});

onUnmounted(() => {
  if (chartInitializationPromise.value) {
    chartInitializationPromise.value.then(sciChartSurface => {
      sciChartSurface.delete();
    });
  }
});

watch(
  () => props.data,
  () => {
    if (chartInitializationPromise.value) {
      chartInitializationPromise.value.then(sciChartSurface => {
        sciChartSurface.delete();
        chartInitializationPromise.value = initSciChart();
      });
    }
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.lineChart {
  width: 100%;
  height: 100%;
  .line-charts {
    width: 100%;
    height: 100%;
  }
}
</style>
